設計大綱

今天來設計Landing page的header。這次想要做的是一個滿版的header，在header裡面會有標題、內容、以及input（提供使用者填寫email去subscribe平台）。由於怕篇幅太長，所以header會分上集和下集，明天下集才會講Navigation Bar唷！

步驟

1. 處理header的圖檔

把header的圖片拉進設定好Grid system的畫布裡

把圖檔放在畫布的頂端，並調整與畫布同寬

2. 輸入標題、內容、input、button
   這邊會把Header裡的標題、內容及input統一靠右，因為想突顯背景圖

標題

• 在右邊6欄裡輸入標題
• 文字大小為40px（h1的大小）
• 字重為Bold
• 顏色為Secondary(#FDFCFC)

內容

• 在標題下一行間隔24px，並輸入內容
• 文字大小為24px（h4的大小）
• 字重為Normal
• 顏色為Secondary(#FDFCFC)

Input

• 在內容下一行間隔40px，並畫出一個長方形
• 調整為沒背景顏色、外框顏色為Secondary(#FDFCFC)
• 長度先隨便拉（因為要看Button多長再決定Input的長度）

Placeholder

• 在input內輸入placeholder的文案
• 文字大小為16px(p的大小)
• 字重為Regular
• 顏色為Secondary(#FDFCFC)，加上60%透明度
• 調整Button的Padding，從而調整Button的高度
  （整個Landing page裡的所有input也都會一樣）
  • Padding-y：12px
  • Padding-Left：24px

Button

• 在Input右邊間隔16px，並畫出一個長方形
• 背景顏色為漸層的Primary(#9B3C05 ~ #4E1E03)
• 在裡面輸入Button的文字
• 文字大小為16px
• 字重為Medium
• 顏色為Secondary(#FDFCFC)
• 調整Button的Padding，從而調整Button的長度與高度
  （接下來整個Landing page裡的所有button也都會一樣）
  • Padding-y：12px
  • Padding-x：40px

調整Input的長度

• 根據Button的長度，再去確認間距(spacers)是否為16px

3. 調整位置

• 確認所有元件的間距
• 全選header裡的元件，並垂直置中

小提醒：

• 元件之間的間距大小能分辦出群組的分別，因此這邊能看出有兩組:「標題與內容」「Input與Btn」
• 記得所有的元件的長度、高度，盡量以padding去「內推」而成

結論

這是我第一次寫實作，還真的有點困難XDD，畢竟在設計時腦袋想到手就開始動了，但要記錄的話，就還要思考哪些部分要拆開講(哈哈哈哈)，所以如果有任何錯誤或不懂可以和我說Q_Q！下一篇會講header的下集 —— Navigation Bar！
明天見